<template>
	<div class="cart">
		<!--评价头部-->
		
		<!--下边评价体-->
		<div class="body">
			<!--菜品详情展示-->
			<div class="left">
				
				<el-image style="width: 75%; height: 220px;margin: 30px" :src="`http://localhost:8080/res/${food.food_img}`" fit="cover"></el-image>
				<div class="left_foodname" >{{food.food_name}}</div>
				<div class="left_fooddesc">
					{{food.food_depiction}}
				</div>
			</div>
			<!--菜品评价-->
			<div class="right">
				<!--其他菜品评价-->
				<div class="r_other">
					
					<p>好评率：{{food.good_frequency}}%</p>
					
				</div>
				
				<div class="r_rate"><span>口味评价：</span>
					<el-rate style="display: inline-block" show-text v-model="evaluation.evaluation_lv" :colors="colors">
					</el-rate>
				</div>
				<!-- 上传的地址测试用，即action的路径 -->
				<el-upload
				  class="r_upload"
				  ref="upload"
				  action=""
				  list-type="picture-card"
				  :file-list="filelist"
				  :limit="1"
				  :auto-upload="false">
				  <i class="el-icon-plus"></i>
				</el-upload>

				<div class="r_common" style="margin: 30px 20px;">
					<div style="font-size: 20px;vertical-align: top;margin: 20px 10px">评价内容</div>
					<el-input type="textarea" rows="4" style="margin-left:10px;  width: 70%" placeholder="说点什么吧..." v-model="evaluation.evaluation_content">
					</el-input>
				</div>
				<div class="r_button" style="text-align: center">
					<el-button type="primary" @click="onEvaluation">发表评论</el-button>
					<el-button type="danger" style="margin-left: 100px" @click="onExit">退出</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import EvaluateService from './EvaluateService.js';
	import Vue from 'vue'
	export default {
		name: "Evaluate",
		data() {
			return {
				//value2: 5,//默认好评
				order_id:0,
				userObject:{},
				url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				filelist:[],
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'] ,// 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
				evaluation:{//
					user_id:'',
					foodid:'',
					evaluation_content:'',
					evaluation_lv:5,
				},
				food:{
					food_img:'',
					food_depiction:'',
					food_name:'',
					good_frequency:0,
				},
			}
		},
		created() {
			
			this.evaluation.foodid=this.$route.params.data;//有没有传过来不清楚，之后再测试一下。
			this.order_id=this.$route.params.orderid;
			console.log(this.evaluation.foodid);
			console.log(this.$route.params.orderid);
			
			Vue.axios.get(`http://localhost:8080/user/getlogin`).then(r=>{
				
				Vue.axios.post(`http://localhost:8080/food/detail`,this.evaluation).then(
					res=>{
						this.food.food_name=res.data.food_name;
						this.food.food_depiction=res.data.food_depiction;
						this.food.food_img=res.data.food_img;
						this.food.good_frequency=res.data.good_frequency*100;
						console.log(res.data);
					}
				)
				this.userObject = r.data.loginUser;
				console.log(this.user_id)
				if(!this.userObject){
					alert('对不起,请先登录!');
					this.$router.push({
						name: 'Login'
					});
				}else{
					this.evaluation.user_id = r.data.loginUser.user_id;
				}
					
			 });
		},
		methods:{
			onEvaluation(){
				let formData = new FormData();
				
				let fileList = this.$refs.upload.uploadFiles;
				
				let result = fileList.map(obj => {
					return obj.raw
				});
				
				console.log(result);
				
				result.forEach(function(file) {
					formData.append('mpfs', file, file.name);
				})
				formData.append("user_id",this.evaluation.user_id);
				formData.append("food_id",this.evaluation.foodid);
				formData.append("evaluation_content",this.evaluation.evaluation_content);
				formData.append("evaluation_lv",this.evaluation.evaluation_lv);
				EvaluateService.onEvaluation(
				r=>{
					if(r){
						alert("评价成功！");
						this.$router.push({
							name: 'OrderDetailForLook',
							params: {
								data: this.order_id
							}
						});
						// this.$router.back();
					}else{
						alert("评价失败");
					}
				},formData);
				Vue.axios.post(`http://localhost:8080/goodorder/updategoodorder`,{
					order_id:this.order_id,
					status:18
					
				})
			},
			onExit(){
				this.$router.push({
					name: 'OrderDetailForLook',
					params: {
						data: this.order_id
					}
				});
			}
			
		}
	}
</script>

<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
		style: "overflow: auto";
	}

	.cart {		
		height: 100%;
		width: 1200px;
		margin: 0 auto;
		
		.body {
			margin-top: 80px;
			display: flex;
			background-color: lightgoldenrodyellow;
			box-shadow:  0 2px 2px 0 rgba(102, 14, 48, 0.1);
			.left {
				flex: 1;
				//background-color: white;
				.left_foodname{
					margin-left: 30px;
					font-family: "Helvetica Neue";
					font-size: 22px;
					color: #303133; //字体颜色
					font-weight: 400; //加粗
				}
				.left_fooddesc{
					margin-left: 30px;
					margin-top: 10px;
					margin-right: 30px;
					font-family: "Helvetica Neue";
					font-size: 16px;
					text-indent: 2em;
					color: #606266; //字体颜色
					
				}
			}

			.right {
				flex: 4;
				//其他菜品评价
				.r_other{
					float: right;
					width: 25%;
					//background-color: lightblue;
					height: 100%;
					
				}
				.r_rate{
					margin: 40px 30px;
				}
				.r_upload{
					margin: 40px 30px;
				}
				
				
			}
		}
	}
</style>
